<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-05 21:42:16
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-18 15:18:45
 * @FilePath: \vue3_admin_template\project\src\views\product\spu\skuForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-05 21:42:16
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-07 18:10:34
 * @FilePath: \vue3_admin_template\project\src\views\product\spu\skuForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEtsn
-->
<template>
  <el-form ref="form" label-width="100px">
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请添加SKU名称"
        v-model="skuParams.skuName"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        v-model="skuParams.price"
        placeholder="价格(元)"
        type="number"
        :min="1"
        :max="10"
        style="width: 100%"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(KG)">
      <el-input
        v-model="skuParams.weight"
        type="number"
        :min="1"
        :max="10"
        style="width: 100%"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="描述">
      <el-input
        v-model="skuParams.skuDSc"
        type="textarea"
        :min="1"
        :max="10"
        label="label"
        clearable
      ></el-input>
    </el-form-item>
    <!-- 平台属性 -->
    <el-form-item label="平台属性">
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item
          :label="item.attrName"
          v-for="item in attrArr"
          :key="item.id"
        >
          <el-select v-model="item.attrIdAndValueId" placeholder="请选择">
            <el-option
              v-for="attrValue in item.attrValueList"
              :key="attrValue.id"
              :label="attrValue.valueName"
              :value="`${item.id}:${attrValue.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="电池容量">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运行内存">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机身内存">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="CPU型号">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="屏幕尺寸">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
    </el-form-item>
    <!-- 销售属性 -->
    <el-form-item label="销售属性">
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item
          :label="item.saleAttrName"
          v-for="item in saleArr"
          :key="item.id"
        >
          <el-select
            v-model="item.saleIdAndValueId"
            placeholder="请选择销售属性"
          >
            <el-option
              v-for="saleAttrValue in item.spuSaleAttrValueList"
              :key="saleAttrValue.id"
              :label="saleAttrValue.saleAttrValueName"
              :value="`${item.id}:${saleAttrValue.saleAttrValueName}`"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="尺码">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内存">
          <el-select v-model="model" placeholder="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table :data="imgArr" style="width: 100%" borderv ref="table">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="prop" label="图片">
          <template #="{ row }">
            <img
              :src="row.imgUrl"
              alt="暂无图片"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称"></el-table-column>
        <el-table-column prop="prop" label="操作" width="180px">
          <template #="{ row }">
            <el-button type="primary" size="small" @click="handler(row)">
              设置默认
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" size="small" @click="save">保存</el-button>
      <el-button size="small" :plain="true" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
//引入API
import { reqAttr } from '@/api/product/attr'
import {
  reqSpuImageList,
  reqSpuHasSaleAttr,
  reqAddSku,
} from '@/api/product/spu'
import { AttrResponseData } from '@/api/product/attr/type'
import {
  SpuHasImg,
  SaleAttrResponseData,
  SaleAttr,
  SpuImg,
  SkuData,
} from '@/api/product/spu/type'
import type { Attr } from '@/api/product/attr/type'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['changeScene'])
//平台属性
let attrArr = ref<Attr[]>([])
//销售属性
let saleArr = ref<SaleAttr[]>([])
//照片墙的数据
let imgArr = ref<SpuImg[]>([])
let table = ref() //获取table组件实例
//收集SKU参数
let skuParams = reactive<SkuData>({
  category3Id: '', //三级分裂Id
  spuId: '', //已有的SPU的ID
  tmId: '', //spu品牌的ID
  skuName: '', //sku名字
  price: '', //sku价格
  weight: '', //sku重量
  skuDSc: '', //sku描述
  skuAttrValueList: [
    {
      //平台属性收集
      attrId: '', //平台属性ID
      valueId: '', //属性值ID
    },
  ],
  skuSaleAttrValueList: [
    //销售属性
    {
      saleAttrId: '', //属性ID
      saleAttrValueId: '', //属性值Id
    },
  ],
  skuDefaultImg: '', //sku图片地址
})
//保存添加sku参数方法回调
const save = async () => {
  //参数整理
  //平台属性
  let attrArrs: any = attrArr.value.reduce((prev: any, next: any) => {
    if (next.attrIdAndValueId) {
      let [attrId, valueId] = next.attrIdAndValueId.split(':')
      prev.push({
        attrId,
        valueId,
      })
    }
    return prev
  }, [])
  skuParams.skuAttrValueList = attrArrs
  //销售属性整理
  skuParams.skuSaleAttrValueList = saleArr.value.reduce(
    (prev: any, next: any) => {
      if (next.saleIdAndValueId) {
        let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(':')
        prev.push({
          saleAttrId,
          saleAttrValueId,
        })
      }
      return prev
    },
    [],
  )

  let result = await reqAddSku(skuParams)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '添加SKU成功',
    })
    emit('changeScene', {
      flag: 0,
    })
  } else {
    ElMessage({
      type: 'error',
      message: '添加SKU失败',
    })
  }
}

const initSkuData = async (
  c1Id: string | number,
  c2Id: string | number,
  spu: any,
) => {
  //收集数据
  skuParams.category3Id = spu.category3Id
  skuParams.spuId = spu.id
  skuParams.tmId = spu.tmId

  //获取平台属性
  let result: AttrResponseData = await reqAttr(c1Id, c2Id, spu.category3Id)
  attrArr.value = result.data
  //获取照片墙的数据
  let result1: SpuHasImg = await reqSpuImageList(spu.id)
  imgArr.value = result1.data
  //获取已有的销售属性数据
  let result2: SaleAttrResponseData = await reqSpuHasSaleAttr(spu.id)
  saleArr.value = result2.data
}
const cancel = () => {
  emit('changeScene', {
    flag: 0,
    params: 'add',
  })
}
//设置默认图片的方法回调
const handler = (row: SpuImg) => {
  //点击的时候,全部的图片的复选框先不勾选
  imgArr.value.forEach((item) => {
    table.value.toggleRowSelection(item, false)
  })
  //选中的图片才勾选
  table.value.toggleRowSelection(row, true)

  skuParams.skuDeafalut = row.imgUrl
}
//当前子组件的方法对外暴露
defineExpose({ initSkuData })
</script>

<style lang="scss" scoped></style>
